<template>
  <div class="return_point_member">
    <c-title :hide="false" :text="plugin_name"></c-title>
    <van-search v-model="order_sn" shape="round" placeholder="请输入订单号" @search="onSearch" />
    <van-tabs v-model="active" @change="tabChange">
      <van-tab title="全部" name="null"></van-tab>
      <van-tab title="进行中" name="0"></van-tab>
      <van-tab title="待释放" name="1"></van-tab>
      <van-tab title="已完成" name="2"></van-tab>
    </van-tabs>
    <div class="pointOrderList" v-for="item in list" :key="item">
      <div class="lis_t">
        <div class="lis_t_order">{{ item.order_sn }}</div>
        <div class="lis_t_orderStatus">{{ item.status_name }}</div>
      </div>
      <div class="lis_tag">
        <div class="lis_tag_txt">{{ item.activity_name }}</div>
        <div class="lis_tag_txt">{{ item.category_name }}</div>
      </div>
      <div class="lis_award_box">
        <div class="lis_award">
          <div class="lis_award_t">{{ item.reward_num }}</div>
          <div class="lis_award_b">赠送{{ froze_love_name }}</div>
        </div>
        <div class="lis_award">
          <div class="lis_award_t">{{ item.active_num }}</div>
          <div class="lis_award_b">已奖励</div>
        </div>
        <div class="lis_award">
          <div class="lis_award_t">{{ item.freeze_num }}</div>
          <div class="lis_award_b">未奖励</div>
        </div>
      </div>
      <div class="lis_good">
        <div class="lis_good_img">
          <img :src="item.thumb" alt="" />
        </div>
        <div class="lis_good_centen">
          <div class="lis_good_centen_t">{{ item.title }}</div>
          <div class="lis_good_centen_b">￥{{ item.price }}</div>
        </div>
      </div>
      <div class="lis_btn">
        <div class="btn" @click="showOpen(item.id, '')">奖励详情</div>
      </div>
    </div>
    <van-empty image="search" description="" v-if="list.length <= 0" />
    <van-popup v-model="show" round position="bottom" :close-on-click-overlay="false" :style="{ height: '60vh', background: '#F5F5F5' }">
      <div class="awardDetail">
        <div class="awardDetail_top">
          <div class="awardDetail_top_t">奖励详情</div>
          <div class="awardDetail_top_i">
            <i class="iconfont icon-guanbi" @click="showClose"></i>
          </div>
        </div>
        <div class="awardDetail_list" v-for="(item, index) in detailList" :key="index">
          <div class="awardDetail_list_t">
            <div class="awardDetail_list_t_order">{{ item.order_sn }}</div>
            <div class="awardDetail_list_t_num">{{ item.real_reward_num }}</div>
          </div>
          <div class="awardDetail_list_b">
            <span>下单会员</span>
            <img :src="item.avatar" class="awardDetail_list_b_img" alt="" />
            <div class="awardDetail_list_b_name">
              <span>[ID：{{ item.buy_id }}]</span><span>{{ item.nickname }}</span>
            </div>
          </div>
        </div>
        <div v-if="detailPage < detailTotalPage" @click="showOpen('', 'more')" class="moreTxt">点击加载更多</div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data() {
    return {
      order_sn: "",
      active: "null",
      show: false,
      list: [],
      detailList: [],
      detailPage: 1,
      detailTotalPage: 0,
      plugin_name: "",
      showMoreid: "",
      froze_love_name: "",

      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  activated() {
    this.active = "";
    this.order_sn = "";
    this.init();
    this.getData();
    let basic_info = window.localStorage.getItem("yz_basic_info");
    this.froze_love_name = JSON.parse(basic_info).plugin_setting?.love?.froze_love_name;
    let plugin_setting = JSON.parse(basic_info).plugin_setting;
    this.plugin_name = plugin_setting.return_point.plugin_name;
    this.fun.setWXTitle(this.plugin_name);
  },
  methods: {
    showClose() {
      this.show = false;
      this.initDetail();
    },
    onSearch() {
      this.init();
      this.getData();
    },
    tabChange() {
      this.init();
      this.getData();
    },
    init() {
      this.list = [];
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
      this.detailList = [];
      this.detailPage = 1;
      this.detailTotalPage = 0;
    },
    async getData() {
      let json = { order_sn: this.order_sn, status: this.active };
      let { data, msg, result } = await $http.post("plugin.return-point.frontend.member.index", json, "");
      if (result) {
        this.list = data.data;
        this.total_page = data.last_page;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page = this.page + 1;
        let json = {
          page: this.page,
          status: this.active
        };
        let { data, msg, result } = await $http.post("plugin.return-point.frontend.member.index", json, "");
        if (result) {
          this.list = this.list.concat(data.data);
        } else {
          this.$toast(msg);
        }
      }
    },
    initDetail() {
      this.detailPage = 1;
      this.detailTotalPage = 0;
      this.detailList = [];
    },
    async showOpen(id = "", key = "") {
      let json = {};
      if (id) {
        json.id = id;
        this.showMoreid = id;
      }
      if (key == "more") {
        if (this.detailPage >= this.detailTotalPage) {
          return;
        } else {
          this.detailPage = this.detailPage + 1;
          json.page = this.detailPage;
          json.id = this.showMoreid;
        }
      } else {
        await this.initDetail();
      }
      let { data, msg, result } = await $http.post("plugin.return-point.frontend.member.detail", json, "");
      if (result) {
        if (key == "more") {
          this.detailList = this.detailList.concat(data.data);
          return;
        }
        this.show = true;
        this.detailList = data.data;
        this.detailPage = 1;
        this.detailTotalPage = data.last_page;
      } else {
        this.$toast(msg);
        if (key == "more") {
          this.detailPage = this.detailPage - 1;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.return_point_member {
  padding-bottom: 4rem;
  .moreTxt {
    text-align: center;
    color: #999;
  }
  .awardDetail {
    box-sizing: border-box;
    position: relative;
    padding-bottom: 2rem;
    .awardDetail_list {
      margin: 0 0.75rem;
      background: #ffffff;
      padding: 0.94rem 0.63rem;
      box-sizing: border-box;
      border-radius: 0.5rem;
      margin-bottom: 0.63rem;
      .awardDetail_list_t {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 500;
        font-size: 0.88rem;
        line-height: 0.95rem;
        margin-bottom: 0.53rem;
        .awardDetail_list_t_num {
          flex-shrink: 0;
        }
      }
      .awardDetail_list_b {
        display: flex;
        align-items: center;
        font-size: 0.81rem;
        color: #6e6e79;
        .awardDetail_list_b_img {
          width: 1.25rem;
          height: 1.25rem;
          border-radius: 1.88rem;
          margin: 0;
          margin: 0 0.41rem 0 0.22rem;
        }
      }
    }
    .awardDetail_list:last-child {
      margin-bottom: 0;
    }
    .awardDetail_top {
      position: sticky;
      top: 0;
      padding: 1.5rem 0.94rem 1.25rem 0.94rem;
      background: #f5f5f5;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .awardDetail_top_t {
        font-weight: bold;
        font-size: 1rem;
      }
      .awardDetail_top_i {
        width: 1.5rem;
        height: 1.5rem;
        background: #f0f0f1;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        .iconfont {
          color: #6e6e79;
          font-size: 0.75rem;
        }
      }
    }
  }
  .pointOrderList {
    padding: 0.94rem 0.75rem;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 0.5rem;
    margin: 0.63rem 0.75rem;
    .lis_t {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.88rem;
      .lis_t_order {
        font-weight: 500;
      }
      .lis_t_orderStatus {
        color: #f15353;
        font-weight: 400;
      }
    }
    .lis_tag {
      display: flex;
      flex-wrap: wrap;
      font-size: 0.75rem;
      margin-top: 0.63rem;
      .lis_tag_txt {
        padding: 0.37rem 0.53rem;
        box-sizing: border-box;
        background: #f5f5f5;
        border-radius: 0.38rem;
        margin-right: 0.5rem;
      }
    }
    .lis_award_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 4.66rem;
      .lis_award {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .lis_award_t {
          font-weight: bold;
          font-size: 0.94rem;
        }
        .lis_award_b {
          font-size: 0.75rem;
          color: #6e6e79;
          margin-top: 0.47rem;
        }
      }
    }
    .lis_good {
      display: flex;
      padding: 0.63rem;
      box-sizing: border-box;
      justify-content: space-between;
      background: #f5f5f5;
      border-radius: 0.5rem;
      .lis_good_img {
        width: 3.75rem;
        height: 3.75rem;
        background: #d6d6dc;
        border-radius: 0.5rem;
        margin-right: 0.53rem;
        img {
          width: 3.75rem;
          height: 3.75rem;
          border-radius: 0.5rem;
        }
      }
      .lis_good_centen {
        flex: 1;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 0.88rem;
        font-weight: bold;
        .lis_good_centen_t {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 1rem;
          font-weight: 500;
        }
        .lis_good_centen_b {
          color: #f15353;
        }
      }
    }
    .lis_btn {
      display: flex;
      justify-content: flex-end;
      margin-top: 0.94rem;
      .btn {
        font-size: 0.81rem;
        color: #ffffff;
        padding: 0.56rem 0.78rem;
        box-sizing: border-box;
        background: #f15353;
        border-radius: 1.88rem;
        line-height: 0.9rem;
      }
    }
  }
}
</style>
